<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>publish-STAR社区</title>
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/index.css">
    <link rel="stylesheet" href="/bootstrap/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2555489_j9f2czlqxqa.css">
    <link rel="stylesheet" href="/css/editormd.css" />
    <style>

    </style>
</head>
<body>
<nav th:replace="_fragment :: nav"></nav>
<div class="container-fluid main">
    <div class="row">
        <div class="col-lg-9 col-md-12  col-sm-12  col-xs-12">
            <h2><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>发起</h2>
            <form th:action="@{/publish}" method="post">
                <input type="hidden" name="id" th:value="${id}">
                <div class="form-group">
                    <label for="title">问题标题 （简单扼要）：</label>
                    <input autocomplete="off" th:value="${title}" type="text" class="form-control" id="title" name="title" placeholder="问题标题...">
                </div>
                <div class="form-group">
                    <label for="description">问题补充（必填，请参考右侧的提示）</label>
                    <div id="editor">
                         <textarea style="display:none;" th:text="${description}" id="description" name="description"></textarea>
                    </div>
                </div>
                <div style="position: relative;" class="form-group">
                    <label for="tag">添加标签</label>
                    <input autocomplete="off"  th:value="${tag}" type="text" class="form-control" id="tag" name="tag" placeholder="添加标签，以，隔开">
                    <div id="tag_wrapper"  style="">
                        <ul class="nav nav-tabs" role="tablist">
                            <li role="presentation" class="active"><a href="#live" aria-controls="home" role="tab" data-toggle="tab">生活</a></li>
                            <li role="presentation"><a href="#code" aria-controls="profile" role="tab" data-toggle="tab">编程</a></li>
                            <li role="presentation"><a href="#study" aria-controls="messages" role="tab" data-toggle="tab">学习</a></li>
                            <li role="presentation"><a href="#electronic" aria-controls="settings" role="tab" data-toggle="tab">电子产品</a></li>
                        </ul>

                        <!-- Tab panes -->
                        <div class="tab-content">
                            <div role="tabpanel" class="tab-pane active" id="live"></div>
                            <div role="tabpanel" class="tab-pane" id="code"></div>
                            <div role="tabpanel" class="tab-pane" id="study"></div>
                            <div role="tabpanel" class="tab-pane" id="electronic"></div>
                        </div>
                    </div>
                </div>
                <div th:if="${msg != null}" class="alert  alert-danger" role="alert" th:text="${msg}">...</div>
                <button type="submit" class="btn btn-success p_submit">提交</button>
            </form>
        </div>
        <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">
            <h2>问题发起指南</h2>
            <p>问题标题：请用精简的语言描述你的问题</p>
            <p>问题补充：详细补充你的问题内容，并提供一些相关的资料</p>
            <p>选择标签：选择一个或者是多个合适的标签，用逗号隔开，每个标签都不要超过十个字</p>
        </div>
    </div>
    <div style="margin-top: 100px;"></div>
</div>
<script src="/jquery/jquery.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/js/editormd.min.js"></script>
<script src="/js/publish.js"></script>
<script type="text/javascript">
    $(function() {
        var editor = editormd("editor", {
            width: "100%",
            height: "600px",
            delay: 0,
            placeholder: "请输入问题描述……",
            path : "/lib/",
            imageUpload: true,
            imageFormats   : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL : "/image/upload",
        });
    });
</script>
</body>
</html>